import React from "react";
import classNames from "classnames";
import type { FieldBaseType } from "../../type";
import { useStyles } from "./styles";

export default function TextareaField({
  field,
  isValid,
  onChange,
}: {
  field: FieldBaseType<string>;
  isValid: boolean;
  onChange: (value: string) => void;
}) {
  const { value, defaultValue, disabled, placeholder, meta } = field;
  const classes = useStyles();

  const handler = (e: React.FormEvent<HTMLTextAreaElement>) => {
    const v = (e.target as HTMLTextAreaElement).value;
    onChange(v);
  };

  return (
    <textarea
      className={classNames(
        classes.textarea,
        !isValid && classes.invalid,
        disabled && classes.disabled
      )}
      disabled={disabled}
      maxLength={meta?.maxLength}
      value={value ?? defaultValue ?? ""}
      onChange={handler}
      placeholder={placeholder}
    />
  );
}
